<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户名/订单号">
                <a-input v-model="queryParam.keyword" placeholder="用户名/订单号" />
              </a-form-item>
            </a-col>
<!--            <a-col :md="8" :sm="24">-->
<!--              <a-form-item label="订单类型">-->
<!--                <a-select v-model="queryParam.order_type" allowClear placeholder="请选择" default-value="">-->
<!--                  <a-select-option value="">全部</a-select-option>-->
<!--                  <a-select-option value="s">商城订单</a-select-option>-->
<!--                  <a-select-option value="ms">秒杀订单</a-select-option>-->
<!--                  <a-select-option value="pt">拼团订单</a-select-option>-->
<!--                  <a-select-option value="yy">预约订单</a-select-option>-->
<!--                  <a-select-option value="ds">多商户订单</a-select-option>-->
<!--                  <a-select-option value="b">砍价订单</a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getOrderListData">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group @change="getOrderListData(true)" v-model="tableStatus">
          <a-radio-button :value="0"> 全部 </a-radio-button>
          <a-radio-button :value="1"> 未付款 </a-radio-button>
          <a-radio-button :value="2"> 待发货 </a-radio-button>
          <a-radio-button :value="3"> 已发货 </a-radio-button>
          <a-radio-button :value="4"> 已完成 </a-radio-button>
          <a-radio-button :value="5"> 待处理 </a-radio-button>
          <a-radio-button :value="6"> 已取消 </a-radio-button>
          <a-radio-button :value="7"> 回收站 </a-radio-button>
        </a-radio-group>
      </div>
      <a-spin :spinning="spinning">
        <ListTable ref="listTable" :list_th="list_th" :pagaData="pagaData" @triggerAction="listActions"> </ListTable>
      </a-spin>
      <div style="float: right">
        <Pagination v-model="pageParams.pageNo" :total="totalCount" show-less-items />
      </div>
      <a-drawer
        title="订单详情"
        :placement="placement"
        :closable="false"
        :visible="visible"
        :width="650"
        @close="onClose"
      >
        <a-list>
          <a-list-item v-for="(item, index) in records.goods_list" :key="index">
            <template>
              <a-card :hoverable="true">
                <a-card-meta>
                  <a slot="title" style="color: black" width="300px">商品名称：{{ item.name }}</a>
                  <a-avatar class="card-avatar" shape="square" :size="64" slot="avatar" :src="item.pic" />
                  <div class="meta-content" slot="description">
                    <span class="item-name">规格：</span>
                    <template v-if="item.attr_list.length > 0" v-for="(attr, i) in item.attr_list">
                      <span :key="i" class="red-title">{{ attr.attr_group_name }}:{{ attr.attr_name }}</span
                      >;
                    </template>
                  </div>
                  <div class="meta-content" slot="description">
                    <span class="item-name">数量：</span>
                    <span class="red-title">{{ item.num }}{{ item.unit }}</span>
                  </div>
                  <div v-if="records.type != 6" class="meta-content" slot="description">
                    <span class="item-name">小计：</span>
                    <span class="red-title">{{ item.total_price }}元</span>
                  </div>
                  <div v-if="records.type == 5" class="meta-content" slot="description">
                    <span class="item-name">步数宝：</span>
                    <span class="red-title">{{ records.currency }}活力币</span>
                  </div>
                  <div v-if="item.is_level == 1 && records.discount != '10'" class="meta-content" slot="description">
                    <span class="item-name">会员折扣：</span>
                    <span class="red-title">{{ records.discount }}折</span>
                  </div>
                </a-card-meta>
              </a-card>
            </template>
          </a-list-item>
        </a-list>
        <div>
          <a-card :bordered="false">
            <p class="item-name">
              总计金额:
              <span class="red-title">{{ records.total_price }} 元</span>
              <span v-if="records.express_price_1">
                (含运费：<span style="color: green">{{ records.express_price_1 }}</span
                >元)
                <span class="red-title">(包邮，运费减免)</span>
              </span>
              <span v-else>
                (运费：<span style="color: green">{{ records.express_price }}</span
                >元)
              </span>
              <!-- <a-divider /> -->
            </p>
            <p v-if="records.user_coupon_id" class="item-name">
              优惠券:
              <span class="red-title">{{ records.coupon_sub_price }} 元</span>
              <!-- <a-divider /> -->
            </p>
            <template v-if="records.before_update_price">
              <p v-if="records.pay_price > Number(records.before_update_price)" class="item-name">
                后台加价:{{ records.pay_price - Number(records.before_update_price) }}元
              </p>
              <p v-else class="item-name">后台优惠:{{ records.before_update_price - records.pay_price }}元</p>
              <!-- <a-divider /> -->
            </template>
            <p v-if="records.integral && records.integral.forehead_integral" class="item-name">
              使用{{ records.integral.forehead_integral }}积分抵扣：
              <span class="red-title">{{ records.integral.forehead }}</span
              >元
              <!-- <a-divider /> -->
            </p>
            <p class="item-name">
              实际付款： <span class="red-title">{{ records.pay_price }}</span
              >元
              <!-- <a-divider /> -->
            </p>
            <p class="item-name">
              支付方式：
              <a-tag v-if="records.pay_type == 2" color="blue">货到付款</a-tag>
              <a-tag v-else-if="records.pay_type == 3" color="blue">余额支付</a-tag>
              <a-tag v-else color="blue">线上支付</a-tag>
              <!-- <a-divider /> -->
            </p>
            <p class="item-name">
              发货方式：
              <a-tag v-if="records.is_offline == 1" color="orange">到店自提</a-tag>
              <a-tag v-else-if="records.is_dada == 1" color="orange">达达配送</a-tag>
              <a-tag v-else-if="records.is_dada == 2" color="orange">UU配送</a-tag>
              <a-tag
                v-else-if="records.is_dada == 3 && !records.delivery_id && records.delivery_status < 1"
                color="orange"
              >外卖配送</a-tag
              >
              <a-tag v-else-if="records.is_dada == 3 && records.delivery_status > 0" color="orange">商家配送</a-tag>
              <a-tag v-else color="orange">快递发送</a-tag>
              <!-- <a-divider /> -->
            </p>
            <template v-if="records.is_offline == 0 && records.is_dada == 3 && records.delivery_status > 0">
              <p class="item-name">
                配送信息：
                <span
                >配送员：
                  <template
                    v-if="records.delivery_id"
                  ><span class="little-content">{{ records.de_name }}</span></template
                  >
                  <template v-else><span class="little-content">无</span></template> </span
                >；
                <span
                >配送状态：
                  <template v-if="!records.delivery_status"><span class="little-content">未分配</span></template>
                  <template
                    v-if="records.delivery_status == 1"
                  ><span class="little-content">已分配配送员</span></template
                  >
                  <template v-if="records.delivery_status == 2"><span class="little-content">配送中</span></template>
                  <template v-if="records.delivery_status == 3"><span class="little-content">已配送</span></template>
                  <template v-if="records.delivery_status == 9"><span class="little-content">待抢单</span></template>
                </span>
              </p>
            </template>
            <a-divider />
            <template v-if="records.type != 6">
              <p style="margin-bottom: 0.2em" v-if="records.is_offline == 0">
                <span
                  class="item-name"
                >收货人：<span class="little-content">{{ records.name }}</span></span
                ><a-divider type="vertical" />
                <span
                  class="item-name"
                >电话：<span class="little-content">{{ records.mobile }}</span></span
                ><a-divider type="vertical" />
                <span
                  class="item-name"
                >地址：<span class="little-content">{{ records.address }}</span></span
                >
              </p>
              <p v-else style="margin-bottom: 0.2em">
                <span
                  class="item-name"
                >联系人：<span class="little-content">{{ records.name }}</span></span
                ><a-divider type="vertical" />
                <span
                  class="item-name"
                >电话：<span class="little-content">{{ records.mobile }}</span></span
                >
              </p>
              <a-divider />
            </template>
            <template v-if="records.order_type != 'yy'">
              <template v-if="records.is_price == 1">
                <span
                  class="item-name"
                >佣金发放状态：<span class="little-content" style="color: red">佣金已发放</span></span
                >
                <a-divider />
              </template>
              <template v-if="records.trade_status == 2 || records.trade_status == 3">
                <template v-if="records.is_offline == 0 || records.express">
                  <template v-if="records.express_no != ''">
                    <p style="margin-bottom: 0.2em">
                      <span
                        class="item-name"
                      >快递名称：<span class="little-content">{{ records.express }}</span></span
                      ><a-divider type="vertical" />
                      <span
                        class="item-name"
                      >订单号：<span
                        class="little-content"
                      ><a-button type="link">{{ records.express_no }}</a-button></span
                      ></span
                      >
                    </p>
                    <a-divider />
                  </template>
                </template>
                <template v-else>
                  <p style="margin-bottom: 0.2em">
                    <span
                      class="item-name"
                    >核销员：<span class="little-content">{{ records.clerk_name }}</span></span
                    >
                  </p>
                  <a-divider />
                </template>
              </template>
            </template>
            <template v-else>
              <template v-if="records.is_pay == 1">
                <template v-if="records.is_use == 0">
                  <span class="item-name">使用状态：<span class="little-content" style="color: red">未使用</span></span>
                  <a-divider />
                </template>
                <template v-else>
                  <div>
                    <span
                      class="item-name"
                    >使用状态：<span class="little-content" style="color: red">已使用</span></span
                    >
                  </div>
                  <div>
                    <span
                      class="item-name"
                    >佣金发放状态：<span class="little-content" style="color: red">佣金已发放</span></span
                    >
                  </div>
                  <a-divider />
                </template>
              </template>
            </template>
            <template v-if="records.share">
              <span class="item-name">一级分销细况：</span>
              <div style="margin-bottom: 0.2em">
                <span
                >昵称：<span class="little-content" style="color: red">{{ records.share.nickname }}</span></span
                >
                <span
                >详细信息：<span
                  class="little-content"
                  style="color: red"
                >{{ records.share.name }} {{ records.share.mobile }}</span
                ></span
                >
                <div>
                  一级佣金：<span class="little-content" style="color: red">{{ records.first_price }}</span
                  >元
                </div>
                <a-divider />
              </div>
            </template>
            <template v-if="records.share_1">
              <span class="item-name">二级分销细况：</span>
              <div style="margin-bottom: 0.2em">
                <span
                >昵称：<span class="little-content" style="color: red">{{ records.share_1.nickname }}</span></span
                >
                <span
                >详细信息：<span
                  class="little-content"
                  style="color: red"
                >{{ records.share_1.name }} {{ records.share_1.mobile }}</span
                ></span
                >
                <div>
                  二级佣金：<span class="little-content" style="color: red">{{ records.second_price }}</span
                  >元
                </div>
                <a-divider />
              </div>
            </template>
            <template v-if="records.share_2">
              <span class="item-name">三级分销细况：</span>
              <div style="margin-bottom: 0.2em">
                <span
                >昵称：<span class="little-content" style="color: red">{{ records.share_2.nickname }}</span></span
                >
                <span
                >详细信息：<span
                  class="little-content"
                  style="color: red"
                >{{ records.share_2.name }} {{ records.share_2.mobile }}</span
                ></span
                >
                <div>
                  三级佣金：<span class="little-content" style="color: red">{{ records.third_price }}</span
                  >元
                </div>
                <a-divider />
              </div>
            </template>
            <p class="item-name" v-if="records.rebate > 0">
              自购返利：
              <span class="red-title">{{ records.rebate }}</span>
              <a-divider />
            </p>
            <p class="item-name" v-if="records.remark">
              用户备注：
              <span class="red-title">{{ records.remark }}</span>
              <a-divider />
            </p>
            <p class="item-name" v-if="records.seller_comments">
              商家备注：
              <span class="red-title">{{ records.seller_comments }}</span>
              <a-divider />
            </p>
            <p style="margin-bottom: 0.2em" v-if="records.shop_id">
              <span
                class="item-name"
              >门店名称：<span class="little-content">{{ records.shop.name }}</span></span
              ><a-divider type="vertical" />
              <span
                class="item-name"
              >门店地址：<span class="little-content">{{ records.shop.address }}</span></span
              ><a-divider type="vertical" />
              <span
                class="item-name"
              >电话：<span class="little-content">{{ records.shop.mobile }}</span></span
              >
              <a-divider />
            </p>
            <p class="item-name" v-if="records.content">
              买家留言：
              <span class="red-title">{{ records.content }}</span>
            </p>
          </a-card>
        </div>
      </a-drawer>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getOrderList } from '@/api/share'
import { STable } from '@/components'
import ListTable from './components/ListTable'
import { Pagination } from 'ant-design-vue'

const ORDER_STATUS = {
  0: '未支付',
  1: '已支付'
}
const CONFIRM_STATUS = {
  0: '未收货',
  1: '已收货'
}
const SEND_STATUS = {
  0: '未发货',
  1: '已发货'
}
const detailsColumns = [
  {
    title: '商品信息',
    dataIndex: 'info'
  }
]
const columns = [
  {
    title: '用户名（ID）',
    dataIndex: 'user_id',
    width: 150,
    scopedSlots: { customRender: 'userInfo' }
  },
  {
    title: '订单状态',
    dataIndex: 'is_pay',
    width: 24,
    scopedSlots: { customRender: 'orderStatus' }
  },
  {
    title: '订单号',
    dataIndex: 'order_no',
    width: 350
  },
  {
    title: '下单时间',
    dataIndex: 'created_at',
    scopedSlots: { customRender: 'createTime' },
    width: 180
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 250,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'ShareOrder',
  components: {
    STable,
    ListTable,
    Pagination
  },
  data () {
    return {
      list_th: [
        { type: 'shareOrder', title: '商品信息', span: 5 },
        { type: 'shareOrder', title: '单价/数量', span: 3 },
        { type: 'shareOrder', title: '订单金额', span: 3 },
        { type: 'shareOrder', title: '买家/收货人', span: 3 },
        { type: 'shareOrder', title: '订单状态', span: 2 },
        { type: 'shareOrder', title: '分销情况', span: 4 },
        { type: 'shareOrder', title: '佣金状态/时间', span: 3 },
      ],
      totalCount: 0,
      spinning: false,
      pageParams: {
        pageNo: 1,
        pageSize: 10
      },
      tableStatus: 0,
      pagaData: [],
      address: {},
      addressVisible: false,
      addressModalLoading: false,
      visible: false,
      placement: 'right',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      // 表头
      columns,
      reason: '',
      sellerComments: '',
      detailsColumns,
      records: {},
      // 高级搜索 展开/关闭
      advanced: false,
      selectedLevel: String,
      // 权限树
      permissionTree: [],
      modalLoading: false,
      defaultCheckedKeys: [],
      // 查询条件参数
      queryParam: {},
      tabKey: '',
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  created () {
    this.getOrderListData()
  },
  watch: {
    currentPage () {
      this.getOrderListData()
    },
    $route: function (newVal, oldVal) {
      console.log(oldVal)
      console.log(newVal)
      if (newVal !== oldVal && newVal.name === 'ShareOrder') {
        this.queryParam.parent_id = null
        this.getOrderListData()
      }
    }
  },
  computed: {
    currentPage () {
      return this.pageParams.pageNo || 1
    },
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  filters: {
    statusFilter (key, type) {
      if (type === 1) {
        return ORDER_STATUS[key]
      }
      if (type === 2) {
        return SEND_STATUS[key]
      }
      if (type === 3) {
        return CONFIRM_STATUS[key]
      }
    }
  },
  methods: {
    getOrderListData (flag) {
      this.spinning = true
      if (flag) {
        this.pageParams.pageNo = 1
      }
      if (this.$route.query.parent_id) {
        this.queryParam.parent_id = this.$route.query.parent_id
      }
      const params = {
        ...this.queryParam,
        ...this.pageParams,
        status: this.tableStatus
      }
      getOrderList(params).then((res) => {
        if (res.code === 0) {
          this.expressList = res.data.express_list
          this.pagaData = res.data.data
          this.totalCount = res.data.totalCount
        } else {
          that.$message.error(res.msg)
        }
        this.spinning = false
      })
    },
    listActions (name, row, reason) {
      switch (name) {
        case 'order_edit': // 编辑
          this.$router.push({ name: 'OrderDetails', query: { order_id: row.id } })
          break
        default:
          break
      }
    },
    resetSearchForm () {
      this.queryParam = {}
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    showDrawer (record) {
      this.visible = true
      this.records = record
    },
    onClose () {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .meta-content {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  height: 100%;
  width: 100%;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.card-avatar {
  width: 48px;
  height: 48px;
  margin-top: 30px;
}
.item-name {
  margin-bottom: 0.2em;
  font-weight: bold;
}
.red-title {
  color: red;
}
.little-content {
  font-size: 10px;
  font-weight: normal;
}
button {
  margin: 1px;
}
.button_style {
  text-align: center;
  width: 40px;
  height: 17px;
  font-size: 10px;
  padding: 0.5px 0 18px;
}
</style>
